import { View, Text, Image } from "@tarojs/components";
import Taro, { useLoad } from "@tarojs/taro";
import "./index.scss";
import { useState, useEffect } from "react";
import { request } from "@/utils/request";

export default function ClaimJiFen() {
  // stauts  0 未开始 1 进行中 2 已结束 3 已发放
  const [areaList, setAreaList] = useState<any[]>([]);
  function getStatusName(status) {
    switch (status) {
      case 0:
        return "未开始";
      case 1:
        return "进行中";
      case 2:
        return "已截止";
      case 3:
        return "已发放";
      default:
        return "";
    }
  }
  function jumpToBaoMingPage(item) {
    // if(item.status ===1 ){
      Taro.navigateTo({
        url: `/pages/jiFenBaoMing/index?activityId=${item.id}`,
        success: (res) => {
          res.eventChannel.emit("baoMingAddressData", item);
        },
      });
      return 
    // }else {
    //   Taro.showToast({
    //     title: `活动${getStatusName(item.status)}`,
    //     icon: "none",
    //   })
    // }
  }
  function getCityPinYinName(cityName){
    let cityPinYinNameMap = {
      "芜湖市": "wuhu",
      "毕节市": "bijie",
    };
    return cityPinYinNameMap[cityName]
  }
  function getActivityList() {
    request({
      url: "/api/points/company/getAreaList",
      method: "get",
      success: (data) => {
        console.log("getActivityList:", data);
        data.forEach((item) => {
          item.cityPinYinName = getCityPinYinName(item.cityName)
        })
        setAreaList(data);
      },
    });
  }
  useLoad(() => {
    console.log("Page loaded.");
    // 获取活动列表
    getActivityList();
  });

  return (
    <View className="claimJiFen">
      <View className="banner">
        <Image
          mode="widthFix"
          className="img"
          src="https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/mini-jifen/images/jieshao/article-top-banner.jpg"
        />
      </View>
      <View className="boyder">
        <View className="des-item first">
          <View className="title-wrap">
            <View className="icon">
              <Image
                mode="aspectFill"
                className="img"
                src="https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/mini-jifen/images/index2/default-avatar2.png"
              />
            </View>
            <View className="title">积分宝介绍</View>
          </View>
          <View className="des">
            “积分宝”是爱尔基金会与万户良方联合推出的便民公益服务，核心是将居民在积分宝各合作企业内的闲置、零散的用户积分，统一转化为积分宝平台城乡居民基本医疗保险代缴资金，可为本人、家人缴纳城乡居民医保，或捐赠给低收入群体，助力更多人享受医保保障。
          </View>
        </View>

        <View className="des-item">
          <View className="title-wrap">
            <View className="icon">
              <Image
                mode="aspectFill"
                className="img"
                src="https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/mini-jifen/images/jieshao/fuwufanwei.png"
              />
            </View>
            <View className="title">服务范围</View>
          </View>
          <View className="des">
            已开放服务的地区的所有居民，均可参与将闲置积分转为医保代缴金，无其他额外限制。
          </View>
        </View>

        <View className="des-item">
          <View className="title-wrap">
            <View className="icon">
              <Image
                mode="aspectFill"
                className="img"
                src="https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/mini-jifen/images/jieshao/renqun.png"
              />
            </View>
            <View className="title">适用缴费人群</View>
          </View>
          <View className="des">
            <View className="cont-item before-dot">非户籍常住居民</View>
            <View className="cont-item before-dot">农村居民、灵活就业人员</View>
            <View className="cont-item before-dot">各类在校学生</View>
            <View className="cont-item before-dot">
              驻县(市、区)武警中队、武警森林官兵等特定群体
            </View>
          </View>
        </View>

        <View className="des-item">
          <View className="title-wrap">
            <View className="icon">
              <Image
                mode="aspectFill"
                className="img"
                src="https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/mini-jifen/images/jieshao/duihuan.png"
              />
            </View>
            <View className="title">兑换规则</View>
          </View>
          <View className="des">
            各合作企业自主设定兑换比例（如“100积分=1元医保代缴金”），具体比例以企业官方公示为准。
          </View>
        </View>

        <View className="des-item">
          <View className="title-wrap">
            <View className="icon">
              <Image
                mode="aspectFill"
                className="img"
                src="https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/mini-jifen/images/jieshao/liucheng.png"
              />
            </View>
            <View className="title">参与流程</View>
          </View>
          <View className="des">
            <View className="cont-item bg-mb">
              <Text className="bold">
                <Text className="dot">1</Text>
                服务时间:
              </Text>
              <Text>
                积分宝每年有固定开展周期，居民需在官方公布的活动期间内参与，逾期无法提交申请;
              </Text>
            </View>
            <View className="cont-item bg-mb">
              <Text className="bold">
                <Text className="dot">2</Text>报名参与:
              </Text>
              <Text>
                在本栏目中选择已开通服务的城市，进入报名页面，点击“报名参与”;
              </Text>
            </View>
            <View className="cont-item bg-mb">
              <Text className="bold">
                <Text className="dot">3</Text>筛选企业:
              </Text>
              <Text>
                查看合作企业的积分兑换规则，根据自身积分持有情况，自主选择要兑换积分的合作企业;
              </Text>
            </View>
            <View className="cont-item bg-mb">
              <Text className="bold">
                <Text className="dot">4</Text>签署兑换协攻:
              </Text>
              <Text>
                仔细阅读《积分宝积分兑换服务协议》，确认知晓积分转化规则、资金用途限制等内容后，点击“同意协议并提交”，完成报名;
              </Text>
            </View>
            <View className="cont-item bg-mb">
              <Text className="bold">
                <Text className="dot">5</Text>兑换结算:
              </Text>
              <Text>
                报名结束后，平台根据居民提交的兑换申请，与对应合作企业完成积分结算，将积分转化为医保代缴金:
              </Text>
            </View>
            <View className="cont-item bg-mb">
              <Text className="bold">
                <Text className="dot">6</Text>明确用途:
              </Text>
              <Text>
                居民在结算完成后，可通过小程序选定为指定缴费人群缴费或进行捐赠;
              </Text>
            </View>
            <View className="cont-item bg-mb">
              <Text className="bold">
                <Text className="dot">7</Text>统一代缴:
              </Text>
              <Text>
                基金会将代缴金统一缴纳至指定医保账户完成缴费。居民可通过当地医保官方渠道查询缴费明细及结果。
              </Text>
            </View>
            {/* <View className='cont-item'>
            <Text className='bold'></Text>
            <Text></Text>
          </View> */}
          </View>
        </View>

        <View className="des-item">
          {/* <View className="tip">
          您在当地合作商户攒的会员积分，可以转化成积分宝的积分，在本平台代缴医保的时候可以直接抵钱使用
        </View> */}
          <View className="title-wrap">
            <View className="icon">
              <Image
                mode="aspectFill"
                className="img"
                src="https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/mini-jifen/images/jieshao/diqu.png"
              />
            </View>
            <View className="title">已开通地区（点击参加）</View>
          </View>
          <View className="address-list">
            {areaList &&
              areaList.map((item, index) => {
                return (
                  <View
                    className={['address-item',item.cityPinYinName].join(' ')}
                    onClick={() => {
                      jumpToBaoMingPage(item);
                    }}
                  >
                    <View className="address">
                      {item.provincesName + item.cityName}
                    </View>
                    <View
                      className={["status", `status${item.status}`].join(" ")}
                    >
                      {getStatusName(item.status)}
                    </View>
                  </View>
                );
              })}
          </View>
        </View>
      </View>
    </View>
  );
}
